<template>
	<view>
		<view class="top">
			<view class="topItem" @click="goOrder()">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/orders.png">
				</image>
				<text>订单</text>
			</view>
			<view class="space"></view>
			<view class="topItem" @click="goPoints()">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/points.png">
				</image>
				<text>积分</text>
				<text style="color:	#D3D3D3;">{{points}}</text>
			</view>
		</view>

		<view class="center">
			<view class="centerItem" @click="goAddress">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/address.png">
				</image>
				<text>收货地址</text>
			</view>
			<view class="centerItem" @click="goEditUserInfo()">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/information.png">
				</image>
				<text>个人信息</text>
			</view>
			<view class="centerItem">
				<button class="imgButton" open-type="contact"
					style="background-image: url('https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/2023-02-20/fe083e15-502d-4fe4-8f3c-cc60fe7e9139_%E5%AE%A2%E6%9C%8D.png');"></button>
				<text>联系客服</text>
			</view>
		</view>
		<view class="center">
			<view class="centerItem" @click="goAdoptionCage">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/cage.png">
				</image>
				<text>我的鸽笼</text>
			</view>
			<view class="centerItem" @click="goMyHarvest">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/harvest.png">
				</image>
				<text>我的收获</text>
			</view>
			<view class="centerItem" @click="goPointShop">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/pointShop.png">
				</image>
				<text>积分商城</text>
			</view>
		</view>
		<button class="logoutBtn" @click="logout">退出登录</button>
	</view>
</template>

<script>
	//webSocket
	import webSocket from '@/util/websocket.js'
	//用于传头像文件给后端
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				user: {},
				points: 0
			}
		},
		onLoad() {
			//没有token则重定向到登录页
			if (!uni.getStorageSync('TOKEN')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				uni.redirectTo({
					url: '../login/login'
				})
			}
		},
		onShow() {
			if (uni.getStorageSync('TOKEN')) {
				this.getUserInfo()
				this.getUserPoints()
			}
		},
		methods: {
			sss(){
				wx.requestSubscribeMessage({
				  tmplIds: ['y9-TSL5knP11_0SWP9Kx_ngyejKhrOBhZ5eFRuWypWg'],
				  success (res) {
					  console.log(res)
				  }
				})
			},
			async getUserInfo() {
				uni.showLoading()
				const res = await this.$myRequest({
					url: 'user/applet/getUserInfo',
				})
				uni.hideLoading()
				if (res && res.code === 0) {
					this.user = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}
			},
			//上传头像
			chooseImage() {
				uni.chooseImage({
					success: (res) => {
						uni.showLoading({
							title: '正在上传头像中',
						})
						pathToBase64(res.tempFilePaths[0])
							.then(async base64 => {
								let res = await this.$myRequest({
									url: '/uploadBase64',
									method: 'POST',
									data: base64
								})
								res = await this.$myRequest({
									url: '/user/saveAvatar',
									method: 'PUT',
									data: res.data.data
								})
								if (res.data.code == 200) {
									this.getUserInfo()
									uni.hideLoading()
								}
							})
					}
				})
			},
			//跳转页面
			//切换账号
			switchAccount() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			//退出账号
			logout() {
				//断开socket连接
				const token = uni.getStorageSync('TOKEN');
				//发送退出登录消息，移除token
				webSocket.sendSocketMessage(token, -1);
				//关闭连接
				// uni.closeSocket()
				uni.removeStorageSync('TOKEN')
				uni.redirectTo({
					url: '../login/login'
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '../address/address'
				})
			},
			//去编辑信息页面
			goEditUserInfo() {
				uni.navigateTo({
					url: '../editUserInfo/editUserInfo'
				})
			},
			//去密码设置页面
			goUpdatePassword() {
				uni.navigateTo({
					url: `../updatePassword/updatePassword?type=${this.user.password ? 1 : 2}`
				})
			},
			//去订单页面
			goOrder() {
				uni.navigateTo({
					url: '../order/order'
				})
			},
			//去积分页面
			goPoints() {
				uni.navigateTo({
					url: '../points/points'
				})
			},
			//获取用户积分
			async getUserPoints() {
				const res = await this.$myRequest({
					url: 'user/pointsRecord/getUserPoints'
				})
				this.points = res.data;
			},
			//跳转到鸽笼列表页面
			goAdoptionCage() {
				uni.navigateTo({
					url: '/pages/adoptionCage/adoptionCage'
				})
			},
			//跳转到下蛋记录页面
			goMyHarvest() {
				uni.navigateTo({
					url: '/pages/myHarvest/myHarvest'
				})
			},
			goPointShop() {
				uni.navigateTo({
					url: '/pages/pointShop/pointShop'
				})
			}
		},
	}
</script>

<style lang="scss">
	@import '@/static/iconfont/iconfont.css';

	page {
		background-color: #F8F8F8;
	}

	.top {
		background-color: #FFB300;
		height: 230rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx;
		border-radius: 10px;
		display: flex;

		.space {
			width: 35rpx;
		}

		.topItem {
			color: white;
			width: 300rpx;
			height: 200rpx;
			margin: 20rpx 20rpx 20rpx 20rpx;
			border-radius: 10px;
			text-align: center;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			text {
				font-size: 35rpx;
				display: block;
			}
		}
	}

	.center {
		background-color: white;
		height: 200rpx;
		margin: 0 20rpx 20rpx 20rpx;
		padding: 20rpx;
		border-radius: 10px;
		display: flex;

		.centerItem {
			color: black;
			width: 180rpx;
			height: 150rpx;
			margin: 20rpx 20rpx 20rpx 20rpx;
			border-radius: 10px;
			text-align: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			text {
				font-size: 30rpx;
				display: block;
			}
		}
	}

	.imgButton {
		width: 80rpx;
		height: 80rpx;
		background-color: white;
		background-size: cover;
		margin-top: 10rpx;
	}

	button::after {
		border: none;
	}

	.logoutBtn {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 40rpx;
		margin: 100rpx 190rpx 0 190rpx;
		background-color: #FFB300;
		border-radius: 10px;
		color: white;
	}

	.nav {
		display: flex;

		view {
			margin-left: 50px;
		}
	}


	.icon {
		display: flex;

		view {
			width: 25%;
			text-align: center;

			view {
				width: 120rpx;
				height: 120rpx;
				background: #007AFF;
				border-radius: 60rpx;
				margin: 10px auto;
				line-height: 120rpx;
				color: #fff;
				font-size: 50rpx;
			}
		}
	}
</style>
